<template>
    <button class="lc-switch" :class="{[`lc-checked`]: value}" @click="toggle">
        <span></span>
    </button>
</template>

<script lang="ts">
    import { ref } from "vue"
    export default {
        name: "LcSwitch",
        props: {
            value: Boolean
        },
        setup(props, context){
            // const checked = ref(false) // 默认没有选中
            // 实现点击切换，点击取反
            const toggle = ()=>{
                // checked.value = !checked.value
                // 写法一
                // context.emit('input', !props.value) // 将当前的值取反，通过input事件告诉外面
                // 写法二  update: props中定义的字段（实现v-model功能，父组件中直接写v-model:value="bool"）
                context.emit('update:value', !props.value) // 将当前的值取反
                context.emit("onChange", !props.value)  // 借用vue2的想法传递当前的开关值
            }
            // return { checked, toggle }
            return { toggle }
        }
    }
</script>

<style lang="scss" scoped>
    $h: 22px;
    $h2: $h - 4px;
    .lc-switch{
        height: $h;
        width: $h*2;
        border: none;
        background: #bfbfbf;
        border-radius: $h/2;
        position: relative;
        &:focus{
            outline:none;
        }
        &.lc-checked {
            background: #1890ff;
            span{
                left: calc(100% - #{$h2} - 2px)
            }
            &:active{
                > span {width: $h2 + 4px; margin-left: -4px;}
            }
        }
        &:active{
            > span {width: $h2 + 4px;}
        }
    }
    span{
        position: absolute;
        top: 2px;
        left: 2px;
        height: $h2;
        width: $h2;
        background:white;
        border-radius: $h2 / 2;
        /*transition: left 250ms; // 250ms执行完*/
        transition: all 250ms;
    }
    // 实现鼠标移入往右滚动动画
    /*button.checked:hover > span{
        left: calc(100% - #{$h2} - 2px)
    }*/
</style>
